<template>
  <div class="recharge-records">
    <!-- <navbar :title="'充值记录'"></navbar> -->
    <div class="tabbar">
      <tabs v-model="active" color="#283C79">
        <tab title="全部"></tab>
        <tab title="待审核"></tab>
        <tab title="已完成"></tab>
        <tab title="未通过"></tab>
      </tabs>
    </div>

    <div class="records-list">
      <div class="record-item">
        <record-item>
          <div class="record-info" slot="content">
            <div class="status">
              <p>
                <span>状态：</span>
                <span>已完成</span>
              </p>
              <p>￥20000.00</p>
            </div>
            <p class="account">
              <span>支付宝账号：</span>
              <span>1232556434@qq.com</span>
            </p>
          </div>
        </record-item>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import recordItem from "../components/record_item.vue";
import navbar from "../components/navbar.vue";

export default {
  components: {
    recordItem,
    navbar,
    Tab,
    Tabs
  },
  data() {
    return {
      active: 0
    };
  }
};
</script>

<style scoped>
.records-list {
  margin-top: 5px;
}

.record-item {
  margin-top: 1px;
  background-color: #fff;
}

.record-info {
  padding: 0 15px 10px 15px;
}
.record-info > div {
  display: flex;
  justify-content: space-between;
}

.record-info .status {
  padding-bottom: 10px;
}

.record-info .status > p:first-child {
  display: flex;
}

.record-info .status > p:last-child {
  color: var(--money-up);
}

.record-info .account {
  text-align: left;
  padding-top: 10px;
  border-top: 1px solid var(--line-between-color);
}
</style>